<template>
	<view class="videoList">
		<view class="swiper-list">
			<swiper 
			class="swiperH" 
			:vertical="true" 
			@change="change"
			@touchstart="touchStart"
			@touchend="touchEnd"
			>
				<swiper-item v-for="(item,index) of lists" :key="index">
					<view @click="closeCommite" class="swiper-item">
						<video-play @changeLover="changeLover" ref="player" :video="item"></video-play>
					</view>
					<view class="textList">
						<ListLeft :leftText="item"></ListLeft>
					</view>
					<view class="textListRight">
						<list-right @open="open" ref="changDoubLove" :rightText="item"></list-right>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-show="show" class="commit-box">
			<commit></commit>
		</view>
		
	</view>
</template>

<script>
	import videoPlay from "./videoplay.vue"
	import ListLeft from "./ListLeft.vue"
	import listRight from "./listRight.vue"
	import commit from "./commit.vue"
	var time=null
	export default{
		components:{
			videoPlay,
			ListLeft,
			listRight,
			commit
		},
		props:["lists"],
		data(){
			return{
				list:[],
				pageStartY:0,
				pageEndY:0,
				page:0,//当前播放的视频
				show:false
			}
		},
		methods:{
			open(){
				if(this.show===false){
					this.show=true
				}
			},
			closeCommite(){
				if(this.show===true){
					this.show=false
				}
			},
			// 双即时爱心变红
			changeLover(){
				
				this.$refs.changDoubLove[0].changLove()
			},
			// 视频滑动时监听向下还是向上滑动
			change(res){
				clearTimeout(time)
				this.list=this.lists
				this.page=res.detail.current
				time=setTimeout(()=>{
					// 向下滑
					console.log(this.page)
					if(this.pageStartY>this.pageEndY){
						this.$refs.player[this.page].player()
						this.$refs.player[this.page-1].pause()
						// 防止滑动幅度小
						this.pageStartY=0
						this.pageEndY=0
					}else{
						// 向上滑
						this.$refs.player[this.page].player()
						this.$refs.player[this.page+1].pause()
						// 防止滑动幅度小
						this.pageStartY=0
						this.pageEndY=0
					}
				},1)
			},
			touchStart(res){
				this.pageStartY=res.changedTouches[0].pageY
			},
			touchEnd(res){
				this.pageEndY=res.changedTouches[0].pageY
			}
		},
		watch:{
			videoList(){
				
			},
			
		},
		onLoad(){
			console.log(lists)
		}
	}
</script>

<style scoped>
	.videoList{
		width: 100%;
		height: 100%;
	}
	.swiperH{
		width: 100%;
		height: 100%;
	}
	.swiper-list{
		width: 100%;
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
		z-index: 19;
	}
	.textList{
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
		color: #FFFFFF;
	}
	.textListRight{
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
		color: #FFFFFF;
	}
	.commit-box{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 22;
		height: 50%;
		width: 100%;
		display: flex;
		justify-content: center;
		background: #FFFFFF;
		transition: bottom .9s;
		/* transform: translate(0px,-10px); */
	}
</style>
